<template>
  <div class="box-big" style="display: flex">
    <div style="flex: 20%"></div>
    <div style="flex: 60%;">

      <div class="img-ba"> <div class="titile"><span style="margin-left: 120px">物资信息管理系统</span> <br>XIESHIWUZHIGUANLIXITONG</div></div>
      <div style="width: 1000px;  background: linear-gradient(white,dimgray);margin: 0 auto;border: 2px solid dimgray;margin-top: 20px ">
      <ul class="nav">
        <li>
          <a style="background-color: grey" href="javascript:void(0)">物资入库</a>
          <ul class="nav2">
            <li><a href="javascript:void(0)" @click="$router.push('purchase/采购登记')">采购登记</a></li>
            <li><a href="javascript:void(0)" @click="$router.push('Audit')">审核入库</a></li>
          </ul>
        </li>
        <li>
          <a style="background-color: grey" href="">物资出库</a>
          <ul class="nav2">
            <li><a href="javascript:void(0)" @click="$router.push('/DepaCollection')">部门领用</a></li>
            <li><a href="javascript:void(0)" @click="$router.push('/MatLending')">物资借出</a></li>
            <li><a href="javascript:void(0)" @click="$router.push('/matlendAudit')">借出审核</a></li>
          </ul>
        </li>
        <li>
          <a style="background-color: grey" href="">物资处理</a>
          <ul class="nav2">
            <li><a href="javascript:void(0)" @click="$router.push('/Stock')">库存盘点</a></li>
            <li><a href="javascript:void(0)" @click="$router.push('/Lossreport')">部门报损</a></li>
          </ul>
        </li>

        <li>
          <a style="background-color: grey" href="javascript:void(0)">查询统计</a>

          <ul class="nav2">
            <li><a href="javascript:void(0)" @click="$router.push('/Purquiry')">采购单查询</a></li>

            <li><a href="javascript:void(0)" @click="$router.push('/Warquery')">入库查询</a></li>
            <li><a href="javascript:void(0)" @click="$router.push('/Depquiry')">部门领用查询</a></li>
            <li><a href="javascript:void(0)" @click="$router.push('/Depsummary')">部门领用汇总</a></li>
            <li><a href="javascript:void(0)">部门报损查询</a></li>
            <li><a href="javascript:void(0)">部门报损汇总</a></li>
            <li><a href="javascript:void(0)">借出查询</a></li>
            <li><a href="javascript:void(0)">部门汇总</a></li>
          </ul>

        </li>
        <li>
          <a style="background-color: grey" href="javascript:void(0)">基础信息</a>
          <ul class="nav2">
            <li><a   @click="$router.push('/supplier')" href="javascript:void(0)">供销商管理</a></li>
            <li><a href="javascript:void(0)" @click="$router.push('/MatAdministration')">物资管理</a></li>
            <li><a href="javascript:void(0)" @click="$router.push('/LossAdministration')">部门管理</a></li>
          </ul>
        </li>
        <li>
          <a  @click="$router.push('/demo')" style="background-color: grey" href="javascript:void(0)">用户管理</a>
        </li>
        <li>
          <a style="background-color: grey" @click="quit" href="javascript:void(0)">重新登陆</a>

        </li>
        <li style=" border-right: 1px white solid;">
          <a @click="$router.push('/updatepwd')" style="background-color: grey" href="javascript:void(0)">修改密码</a>

        </li>
      </ul>

    </div>

      <div class="center-buttou">
        <span style="margin-left: 50px">当前登录用户:</span><span style="color: darkkhaki;font-size: 25px;margin-left: 15px">{{usering.name}}</span>
  <div class="ladder">
   <div style="display: flex;height: 30px">
     <div style="width: 100px;flex: 20%;line-height: 30px">当前页面位于:</div>
     <div style="width: 300px;flex: 70%;">
       <el-breadcrumb separator-class="el-icon-arrow-right">
       <el-breadcrumb-item style="line-height: 30px" :to="{ path: '/' }">首页</el-breadcrumb-item>
       <el-breadcrumb-item style="line-height: 30px;color: red" >活动管理</el-breadcrumb-item>
       <el-breadcrumb-item style="line-height: 30px" >活动列表</el-breadcrumb-item>
       <el-breadcrumb-item style="line-height: 30px" >活动详情</el-breadcrumb-item>
     </el-breadcrumb>
     </div>
   </div>


  </div>
      </div>

<div class="zhuye-1">
  <div style="width: 100%;height: 30px;background: linear-gradient(paleturquoise,royalblue);margin-top: 0"></div>
  <div class="zhuye-2" style="padding-top: 50px">
<!--    <div style="width: 100%;height: 30px;background: linear-gradient(paleturquoise,royalblue);margin-top: 0"></div>-->
    <router-view name="text"></router-view>
    <!--        <add-suppplier/>-->

  </div>
</div>

    </div>
    <div style="flex: 20%"></div>
    <div style="width: 100%;height: 50px;background-color: grey;position: fixed;bottom: 0px"></div>
  </div>




</template>

<script>

export default {
  name: "index",

  data() {
    return {
      imgSrc: '',
      usering: {},
      token: localStorage.getItem("TOKEN"),
      activeName: 'second',
    }
  },
  created() {
    this.$axios.get("/api/user/mine/info", {headers: {TOKEN: this.token}}).then(res => {
      this.usering = res.data.data;
    })

  },
methods:{
  quit() {
    this.$router.push('/login');
    localStorage.removeItem('TOKEN');
  },


}


}
</script>

<style scoped>


.ladder{
  width: 0;
  height: 0;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  border-bottom: 30px solid #ccc;
  width: 600px;
      margin-left: 30px;
  display: inline-block;
  margin-right: -60px;
  z-index: -1;
  /*font-weight: bold;*/
  vertical-align: middle;

}
.zhuye-2{
  width:1000px;
  height: 830px;
  margin-top: 30px;
  margin: 0 auto;
  background-color: #ffffff;
  border: 1px solid lightslategray;
}
.zhuye-1{
  width:1000px;
  height: 900px;
  margin-top: 30px;
  margin: 0 auto;
  background-color: gray;
  margin-top: 20px;
  padding: 5px;
  border: 1px solid lightslategray;
}
.box-big{
  /*background-image: url("../image/99.jpg");*/
  /*background-repeat: no-repeat;*/
  /*background-size: 100%, 100%;*/
  background:linear-gradient(darkgrey,paleturquoise);

}
.center-buttou{
  width: 1000px;
  height: 40px;
  background-color: whitesmoke;
  margin: 0 auto;
  line-height: 40px;
  border: 2px solid dimgray;
margin-top: 20px;
}
a {
  text-decoration: none;
}

li {
  list-style: none;
}

.nav {
  width: 950px;
  height: 50px;
  background: linear-gradient(white,dimgray);
margin-left: 5px;

}

.nav li {
  float: left;
  /*margin-right: 0px;*/
  margin-left: 12px;
  position: relative;
  border-left: 1px white solid;

}


.nav li a {
  display: block;
  height: 50px;
  width: 100px;
  text-align: center;
  background: linear-gradient(white,dimgray);
  line-height: 50px;
  color: #fff;
}

.nav li:hover .nav2 {
  display: block;

}


.nav li a:hover {

  color: darkred;
  /*text-decoration: underline;*/

}

.nav li .nav2 {
  display: none;
  position: absolute;
  top: 40px;
  left: 0;
  z-index: 99;
}
.img-ba{
  background-image: url("../image/77.jpg");
  background-repeat: no-repeat;
  height: 250px;
  background-size: 100%;
 position: relative;
  border: 3px solid gray;

}
.titile{
font-size: 40px;
  color: grey;
  position: absolute;
  top: 90px;
  left: 200px;
}

</style>